<!DOCTYPE html>
<html>
	<script> let ab ='张无敌'</script>
	<head>
		<meta charset="utf-8"/>
		<title>平安成电智慧通行</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	</head>
	<body>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-size: inherit;
				color: inherit;
			}
			body{
				height: 100vh;
				background: #fafafa;
			}
			#a{
				padding-top: 48px;
				width: 100%;
				background: #fff;
				padding-bottom: 10px;
			}
			.a-a{
				height: 92px;
				padding: 16px;
				padding-bottom: 40px;
				color: green;
				font-size: 24px;
				font-weight: bold;
				border-bottom: 1px solid rgba(0,0,0,.12);
			}
			.a-b{
				font-size: 16px;
			}
			.a-b li{
				padding: 0 16px;
				height: 48px;
				display: flex;
				align-items: center;
			}
			.a-b li >span{
				margin-left: 8px;
				font-weight: bold;
				font-size: 24px;
				flex: 1;
				text-align: right;
			}
			.a-b li img{
				margin-right: 8px;
				width: 24px;
			}
			.a-c{
				background: #00c4a4;
				width: 130px;
				height: 36px;
				display: block;
				margin: 15px auto 30px auto;
				color: #fff;
				font-size: 14px;
				border: none;
				box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
			}
			#aa{
				left: 0;
				width: 400px;
				white-space: pre;
				position: absolute;
				animation: aa 6s linear 0s infinite ;
			}
			.a-d{
				display: block;
				width: 50px;
				height: 50px;
				border-radius: 4px;
				margin: auto;
			}
			@keyframes aa{
				from{ transform: translate(0%); }
				to{ transform: translate(-56%); }
			}
			
			
			#b{
				display: none;
				width: 100%;
				padding: 16px;
			}
			.b-a{
				width: 100%;
				border-radius:2px;
				padding: 8px;
				background: #fff;
				box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
			}
			.b-b{
				text-align: center;
				font-weight: bold;
				color: rgba(0,0,0,.87);
				font-size: 21px;
				margin-bottom: 10px;
			}
			.b-c{
				display: block;
				margin: auto;
				width: 200px;
				height: 200px;
			}
			.b-d{
				text-align: center;
				margin-top: 7px;
				font-size: 14px;
				color: rgba(0,0,0,.87);
			}
		</style>
		<div id="a">
			<div class="a-a">研究生用户，入校授权有效！</div>

			<ul class="a-b">
				<li><img src=""/>用户姓名 <span id="ab">123</span></li>
				<li><img src=""/>登记类型 <span>研究生（硕士）</span></li>
				<li><img src=""/>登记时间 <span  style="flex:0 1 180px; margin-left: auto; color: #00c4a4; height: 25px; font-size: 19px; position: relative; overflow: hidden;"> <span id="aa"></span></li>
			</ul>
			
			<button class="a-c" onclick="go()">前往个人二维码</button>
			
			<img class="a-d" src="" />

		</div>
		
		<div id="b">
			<div class="b-a">
				<div class="b-b">行人二维码</div>
				<img class="b-c" src="" />
				<div class="b-d" id="bd">二维码剩余有效时间300秒</div>
				<button class="a-c" style="margin-top: 8px; width: 120px;">查看通行规则</button>
			</div>
		</div>
	</body>



	<script>
		const $ = s=> document.querySelector(s);
		
		
		$('#ab').innerHTML = ab;
		function getT(){
			const dateObj = new Date();
			const repairZero =  s=> (s+'').length === 1 ? '0' + s : s;
			const [date,time] = [
				`${dateObj.getFullYear()}-${repairZero(dateObj.getMonth() + 1 )}-${repairZero(dateObj.getDate())}`,
				`${repairZero(dateObj.getHours())}:${repairZero(dateObj.getMinutes())}:${repairZero(dateObj.getSeconds())}`
			]
			
			$('#aa').innerHTML = date + ' ' + time + '   ' + date + ' ' + time;
		}
		  getT()
		  
		  let time = 300;
		  
		setInterval(()=> $('#bd').innerHTML = `二维码剩余有效时间${time-=3}秒` ,3000)
		
		function go(s){
			
			if(s=== 'a'){
				$('#a').style.display= 'block';
				$('#b').style.display= 'none';
			}
			else{
				$('#b').style.display= 'block';
				$('#a').style.display= 'none';
				time = 300;
				$('#bd').innerHTML = `二维码剩余有效时间${time}秒`
			}
		}
		  
	</script>
</html>
